<template>
	<el-dialog v-model="visible" width="500" :fullscreen="fullscreen" :close-on-click-modal="false" destroy-on-close>
		<template #header>
			<div style="width: 100%">
				<div style="float: left;width: 100%">
					<h3>{{ form.name ? form.name : (form.id ? form.name : '新增') }}&nbsp;</h3>
				</div>
				<div style="float: left;width: 100%;margin-top: -10px;margin-bottom: -30px;">
					<el-divider border-style="dashed"/>
				</div>
			</div>
		</template>
		<template #default>
			<el-tabs ref="cardTabs" v-model="activeName" style="height: 100%;margin-top: -10px;">
				<el-tab-pane label="卡片信息" name="base" style="height: 100%;">
					<el-form :model="form" :rules="form.isGroup==='1'?group_rules:item_rules" ref="dialogForm"
							 label-width="100" label-position="right">
						<el-row>
              <el-col :lg="elColLg">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" clearable placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="elColLg">
                <el-form-item label="卡片组" prop="parentLevelCode">
                  <ex-cascader v-model="form.parentLevelCode" dict-code="FamsAssetCard" key-prop="levelCode" :params="{isGroup:'1'}" @change="isGroupChange"></ex-cascader>
<!--                  <el-cascader v-model="form.parentLevelCode" :options="parentOptions"-->
<!--                               :props="parentProps"-->
<!--                               :show-all-levels="false" placeholder="请选择卡片组"-->
<!--                               clearable filterable @change="isGroupChange"></el-cascader>-->
                </el-form-item>
              </el-col>
							<el-col :lg="elColLg" v-if="!form.id" >
								<el-form-item label="类型" prop="isGroup">
									<ex-radio-group v-model="form.isGroup" dict-code="CARD_IS_GROUP" @change="isGroupChange" button></ex-radio-group>
								</el-form-item>
							</el-col>

              <el-col :lg="elColLg" v-if="form.isGroup==='0'" >
                <el-form-item label="业务" prop="bizType">
					<ex-radio-group v-model="form.bizType" dict-code="CARD_BIZ_TYPE"></ex-radio-group>
                </el-form-item>
              </el-col>
						</el-row>
						<el-row v-if="form.isGroup==='0'&&form.parentLevelCode" style="margin-top: -25px;">
							<el-divider>卡片设计</el-divider>
							<card-design :cardForm="form"></card-design>
						</el-row>
					</el-form>
				</el-tab-pane>
				<!--资产卡片-->
				<el-tab-pane v-if="form.bizType==='asset_card'" label="资产类别" name="category" style="height: 100%">
					<ex-rel-table ref="AssetCardCategoryRelTable" name="AssetCardCategory" size="small" :rel-entity="form" :treeApi="this.$API.asset.assetcategory.treeData" default-expand-all></ex-rel-table>
				</el-tab-pane>
				<!--资产台账可展示的资产类别-->
				<el-tab-pane v-if="form.bizType==='asset_ledger'" label="资产类别" name="category" style="height: 100%">
					<ex-rel-table ref="AssetLedgerCategoryRelTable" name="AssetLedgerCategory" size="small" :rel-entity="form" :treeApi="this.$API.asset.assetcategory.treeData" default-expand-all></ex-rel-table>
				</el-tab-pane>
				<!--资产台账展示的资产状态-->
				<el-tab-pane v-if="form.bizType==='asset_ledger'" label="资产状态" name="AssetStatus" style="height: 100%">
					<ex-rel-table ref="AssetLedgerAssetStatusRelTable" size="small" name="AssetLedgerAssetStatus" :rel-entity="form" :treeApi="this.$API.system.dic.treeData" node-key="code" :param="{dictCode:'ASSET_STATUS',dictType:'1'}" default-expand-all>
						提示：默认展示所有状态的资产，若勾选之后，则只能查看勾选状态的资产
					</ex-rel-table>
				</el-tab-pane>
			</el-tabs>
			<div style="flex: auto;text-align: center;margin-bottom: -20px;margin-top: 15px;">
				<el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
				<el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
				<el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import ExRelTable from "@/components/exRelTable/index.vue";
import ExLabel from "@/components/exLabel/index.vue";
import ExFormItem from "@/components/exFormItem/index.vue";
import CardDesign from "@/views/asset/card/card_design.vue";
import formRule from "@/utils/formRule";
import ExRadioGroup from "@/components/exRadioGroup/index.vue";
import ExCascader from "@/components/exCascader/index.vue";
import exDialog from '@/components/exDialog';
import BaseTemplate from "@/utils/baseTemplate";

export default {
	computed: {},
	emits: ['success'],
	components: {
    ExCascader,
		ExRadioGroup,
		CardDesign,
		ExFormItem,
		ExLabel,
		ExRelTable,
		scIconSelect
	},
	props: {
		menu: {
			type: Object, default: () => {
			}
		},
	},
	data() {
		return {
			activeName: 'base',
			visible: false,
			fullscreen: false,
			elColLg: 24,
			form: {
				id: "",
				parentLevelCode: "",
			},
			model: {},
			parentOptions: [],
			parentProps: {
				value: 'levelCode',
				label: 'label',
				checkStrictly: true,
				emitPath: false,
			},
			group_rules: {
				isGroup: [
					{required: true, message: "请选择是否为分组", trigger: "change"},
				],
				name: [
					{required: true, message: "请输入名称", trigger: "change"},
				],
			},
			item_rules: {
				isGroup: [
					{required: true, message: "请选择是否为分组", trigger: "change"},
				],
				name: [
					{required: true, message: "请输入名称", trigger: "change"},
				],
        parentLevelCode: [
					{required: true, message: "请选择所属组", trigger: "change"},
				],
			},
			loading: false,
			oldForm: null,
		}
	},
	watch: {
		form: {
			handler() {
				// console.log(this.form);
			},
			deep: true,
			immediate: true,
		}
	},
	mounted() {

	},
	methods: {
		async initData() {
			this.isGroupChange();
			this.parentOptions = await this.$cache.tree.options(this.$API.asset.card.treeData.storeName, {isGroup: '1'});
		},

		isGroupChange() {
			if (this.form.isGroup === '0') {
        formRule.removeRequired(this.group_rules,'bizType')
        if(!this.form.parentLevelCode){
          return;
        }
				this.fullscreen = true;
				this.elColLg = 6;
			} else {
        formRule.addRequired(this.group_rules,'bizType','请选择卡片业务')
				this.fullscreen = false;
				this.elColLg = 24;
			}
		},
		relHandler(relMap) {
			if (!this.form.relMaps) {
				this.form.relMaps = {};
			}
			for (let key in relMap) {//清空旧的数据
				this.form.relMaps[key] = {};
			}
			//重新赋值新数据
			Object.assign(this.form.relMaps, relMap);
		},
		//显示
		open(entity) {
			this.form = Object.assign({}, entity);
			this.oldForm = Object.assign({}, this.form);
			this.visible = true;
			this.activeName = "base";
			this.initData();
		},
		reset() {
			this.form = Object.assign({}, this.oldForm);
			this.isGroupChange();
			for(let ref in this.$refs){
				try {
					this.$refs[ref].refresh();
				}catch (e){
				}
			}
		},
		//保存
		async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
			if (valid) {
				try {
					this.loading = true
					var res;
					if (this.form.id) {
						res = await this.$API.asset.card.edit.post(this.form)
					} else {
						res = await this.$API.asset.card.add.post(this.form)
					}
					if (res.code === 2000) {
						this.$emit('success');
						this.$message.success(this.$t("code." + res.code));
						this.visible = false;
						this.$store.dispatch("commit", this.form.entityName);
					} else {
						this.$message.warning(res.message)
					}
				} finally {
					this.loading = false
				}
			}
		},
	}
}
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
	color: #fff;
}

</style>
